<template>
    <view class="container">
        <!-- 类型 -->
        <view class="select-type">
            <view class="select-type-title" @click="changeType(0)" :class="{ active1: type === 0 }">支出</view>
            <view class="select-type-title" @click="changeType(1)" :class="{ active2: type === 1 }">入账</view>
            <view class="time">{{ date }}</view>
        </view>
        <!-- 金额 -->
        <view class="money">
            <text class="money-icon" style="color: black;font-weight: bold;">¥</text>
            <text class="money-num" :style="{ color: moneyColor }" style="font-weight: bold">{{
                money }}
            </text>
        </view>
        <scroll-view>
            <view class="type-box">
                <view class="type-item" v-for="(item, index) in typeList" :key="index" @click="selectType(item, index)">
                    <view :class="'icon-' + item.icon" class="iconfont type-icon" :style="iconStyle(index)"></view>
                    <view class="type-title" :style="{ color: index === activeIndex ? '#000000' : '#999999' }">
                        {{ item.title }}
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
    <mono-keyboard :show="true" confirmText="确定" :btnColor="bgColor" @change="updateMoney"
        @confirm="confirmSelection"></mono-keyboard>
</template>
<script setup>
import dayjs from "dayjs";
import { ref, computed } from "vue";
const emit = defineEmits(["confirm"]);
const type = ref(0);
//当天
const date = ref(dayjs().format("M月D日"));


const activeIndex = ref(0);

const changeType = (index) => {
    activeIndex.value = 0
    type.value = index;
};


const selectType = (item, index) => {
    activeIndex.value = index;
};
const List = [
    [
        { title: "餐饮", icon: "canyin" },
        { title: "交通", icon: "jiaotong" },
        { title: "服饰", icon: "fushi" },
        { title: "购物", icon: "gouwu" },
        { title: "娱乐", icon: "yule" },
        { title: "运动", icon: "yundong" },
        { title: "住房", icon: "zhufang" },
    ],
    [
        { title: "水果", icon: "shuiguo" },
        { title: "办公", icon: "bangong" },
        { title: "学习", icon: "xuexi" },
        { title: "蔬菜", icon: "shucai" },
        { title: "旅行", icon: "lvhang" },
        { title: "理财", icon: "licai" },
        { title: "医疗", icon: "yiliao" },
        { title: "快递", icon: "kuaidi" },
    ]]

const typeList = computed(() => List[type.value]);
//颜色切换
const bgColor = computed(() => type.value === 1 ? "#f9ae3d" : "#42b479");

const moneyColor = computed(() => money.value === "" ? "#999" : "#333");

const iconStyle = (index) => ({
    color: index === activeIndex.value ? 'white' : 'black',
    backgroundColor: index === activeIndex.value ? bgColor.value : 'rgba(238, 238, 238,.9)',
});
const money = ref("");
const updateMoney = (e) => {
    money.value = e;
};
const confirmSelection = () => {
    emit("confirm", {
        type: type.value,
        date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        //保留两位小数
        money: parseFloat(money.value).toFixed(2),
        icon: typeList.value[activeIndex.value].icon,
        title: typeList.value[activeIndex.value].title,
    })
};
</script>
<style lang="scss" scoped>
.container {
    margin-bottom: 30rpx;
    margin-top: 50rpx;

    .type-box {
        display: flex;
        height: 276rpx;
        flex-wrap: wrap;
        overflow: scroll;
        padding: 0 40rpx;
    }

    .type-item {
        flex-basis: 16.66%;
        /* 设置 flex-basis 为 100px */
        display: flex;
        margin-bottom: 30rpx;
        flex-direction: column;
        align-items: center;

        .type-icon {
            border-radius: 50%;
            background-color: #f7f7f7;
            padding: 10rpx;
            margin-bottom: 8rpx;
            font-size: 48rpx;
        }

        .type-title {
            font-size: 24rpx;
        }
    }

    .select-type {
        display: flex;
        align-items: center;
        margin: 0 40rpx;
        padding-top: 40rpx;

        .active1 {
            background-color: #EEF8F1 !important;
            color: #42b479 !important;
        }

        .active2 {
            background-color: #FFF7E6 !important;
            color: #F9AE3D !important;
        }

        .select-type-title {
            margin-right: 20rpx;
            border-radius: 4rpx;
            color: #999999;
            font-size: 26rpx;
            padding: 10rpx 18rpx;
            background-color: #f7f7f7;
        }

        .time {
            margin-left: auto;
            font-size: 28rpx;
        }
    }

    .money {
        margin: 0 40rpx 20rpx 40rpx;
        padding: 30rpx 0;
        border-bottom: 1px solid #f7f7f7;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        align-items: center;
        line-height: 64rpx;

        /* 显式设置行高为正常 */
        .money-icon {
            font-size: 48rpx;
            align-self: start;
            display: block;
        }

        .money-num {
            margin-left: 20rpx;
            font-size: 64rpx;
            flex: auto;
            display: block;
        }
    }
}
</style>
